<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/store/auth'

const router = useRouter()
const authStore = useAuthStore()

const formData = ref({
  loginName: '',  // 修改为与后端匹配的参数名
  password: '',
  confirmPassword: '',
  email: '',
  nickname: '',
  gender: '',  // 性别
  birthDate: '',  // 出生日期
  phone: '',  // 手机号
  description: ''  // 个人描述
})

const loading = ref(false)
const errorMessage = ref('')
const successMessage = ref('')
const step = ref(1) // 1: 基本信息, 2: 个人资料, 3: 完成

const validateStep1 = () => {
  if (!formData.value.loginName) {
    errorMessage.value = '请输入用户名'
    return false
  }
  
  // 验证用户名是否为纯数字
  if (!/^[0-9]+$/.test(formData.value.loginName)) {
    errorMessage.value = '用户名必须是纯数字'
    return false
  }
  
  if (!formData.value.password) {
    errorMessage.value = '请输入密码'
    return false
  }
  
  if (formData.value.password.length < 6) {
    errorMessage.value = '密码长度不能少于6位'
    return false
  }
  
  if (formData.value.password !== formData.value.confirmPassword) {
    errorMessage.value = '两次输入的密码不一致'
    return false
  }
  
  if (!formData.value.email) {
    errorMessage.value = '请输入邮箱'
    return false
  }
  
  // 简单的邮箱验证
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  if (!emailRegex.test(formData.value.email)) {
    errorMessage.value = '请输入有效的邮箱地址'
    return false
  }
  
  return true
}

const nextStep = () => {
  errorMessage.value = ''
  
  if (step.value === 1 && validateStep1()) {
    step.value = 2
  }
}

const prevStep = () => {
  errorMessage.value = ''
  step.value = 1
}

const handleSubmit = async () => {
  if (!formData.value.nickname) {
    formData.value.nickname = formData.value.loginName
  }
  
  try {
    loading.value = true
    errorMessage.value = ''
    
    // 将 nickname 映射到 name，并确保其他必填字段有值
    const userData = {
      ...formData.value,
      name: formData.value.nickname,
      gender: formData.value.gender || 'unknown',
      status: 'pending',
      registrationDate: new Date(),
      lastModifiedDate: new Date()
    }
    
    const response = await authStore.register(userData)
    
    if (response.success) {
      successMessage.value = '注册成功！正在跳转到登录页面...'
      step.value = 3
      
      // 延迟2秒后跳转到登录页
      setTimeout(() => {
        router.push('/login')
      }, 2000)
    } else {
      errorMessage.value = response.message || '注册失败，请稍后再试'
    }
    
    return response
  } catch (error) {
    console.error('Registration error:', error)
    errorMessage.value = error.response?.data?.message || '注册失败，请稍后再试'
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="register-page">
    <div class="register-container">
      <div class="register-side">
        <div class="register-side-content">
          <h2>加入我们</h2>
          <p>成为我们社区的一员，分享您的知识和经验</p>
          <div class="register-progress">
            <div class="progress-step" :class="{ active: step >= 1, complete: step > 1 }">
              <div class="step-number">1</div>
              <div class="step-label">账号信息</div>
            </div>
            <div class="progress-line" :class="{ active: step > 1 }"></div>
            <div class="progress-step" :class="{ active: step >= 2, complete: step > 2 }">
              <div class="step-number">2</div>
              <div class="step-label">个人资料</div>
            </div>
            <div class="progress-line" :class="{ active: step > 2 }"></div>
            <div class="progress-step" :class="{ active: step >= 3 }">
              <div class="step-number">3</div>
              <div class="step-label">完成</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="register-content">
        <div class="register-header">
          <h1 class="register-title">创建账号</h1>
          <p class="register-subtitle" v-if="step === 1">请填写您的基本信息</p>
          <p class="register-subtitle" v-else-if="step === 2">补充您的个人资料</p>
          <p class="register-subtitle" v-else>注册完成</p>
        </div>
        
        <div v-if="errorMessage" class="error-message">
          {{ errorMessage }}
        </div>
        
        <div v-if="successMessage" class="success-message">
          {{ successMessage }}
        </div>
        
        <!-- 步骤1：基本信息 -->
        <form v-if="step === 1" class="register-form" @submit.prevent="nextStep">
          <div class="form-group">
            <label for="loginName" class="form-label">用户名</label>
            <input 
              id="loginName" 
              v-model="formData.loginName"
              type="text" 
              class="form-input" 
              placeholder="请输入数字用户名"
              required
            />
            <small class="form-hint">用户名必须是纯数字</small>
          </div>
          
          <div class="form-group">
            <label for="email" class="form-label">邮箱</label>
            <input 
              id="email" 
              v-model="formData.email"
              type="email" 
              class="form-input" 
              placeholder="请输入邮箱"
              required
            />
          </div>
          
          <div class="form-group">
            <label for="password" class="form-label">密码</label>
            <input 
              id="password" 
              v-model="formData.password"
              type="password" 
              class="form-input" 
              placeholder="请输入密码"
              required
            />
            <small class="form-hint">密码长度不能少于6位</small>
          </div>
          
          <div class="form-group">
            <label for="confirmPassword" class="form-label">确认密码</label>
            <input 
              id="confirmPassword" 
              v-model="formData.confirmPassword"
              type="password" 
              class="form-input" 
              placeholder="请再次输入密码"
              required
            />
          </div>
          
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">下一步</button>
          </div>
          
          <div class="register-footer">
            <p>
              已有账号? 
              <router-link to="/login" class="login-link">立即登录</router-link>
            </p>
          </div>
        </form>
        
        <!-- 步骤2：个人资料 -->
        <form v-else-if="step === 2" class="register-form" @submit.prevent="handleSubmit">
          <div class="form-group">
            <label for="nickname" class="form-label">昵称</label>
            <input 
              id="nickname" 
              v-model="formData.nickname"
              type="text" 
              class="form-input" 
              placeholder="请输入昵称"
            />
            <small class="form-hint">选填，如不填写将使用用户名作为昵称</small>
          </div>
          
          <div class="form-group">
            <label for="gender" class="form-label">性别</label>
            <select 
              id="gender" 
              v-model="formData.gender"
              class="form-input"
              required
            >
              <option value="">请选择性别</option>
              <option value="male">男</option>
              <option value="female">女</option>
              <option value="unknown">保密</option>
            </select>
          </div>
          
          <div class="form-group">
            <label for="birthDate" class="form-label">出生日期</label>
            <input 
              id="birthDate" 
              v-model="formData.birthDate"
              type="date" 
              class="form-input" 
              placeholder="请选择出生日期"
            />
          </div>
          
          <div class="form-group">
            <label for="phone" class="form-label">手机号码</label>
            <input 
              id="phone" 
              v-model="formData.phone"
              type="tel" 
              class="form-input" 
              placeholder="请输入手机号码"
              pattern="[0-9]{11}"
            />
            <small class="form-hint">请输入11位手机号码</small>
          </div>
          
          <div class="form-group">
            <label for="description" class="form-label">个人简介</label>
            <textarea 
              id="description" 
              v-model="formData.description"
              class="form-input" 
              placeholder="请输入个人简介"
              rows="4"
            ></textarea>
          </div>
          
          <div class="form-actions">
            <button type="button" class="btn btn-secondary" @click="prevStep">上一步</button>
            <button 
              type="submit" 
              class="btn btn-primary" 
              :disabled="loading"
            >
              <span v-if="loading" class="loading-spinner-small"></span>
              <span v-else>完成注册</span>
            </button>
          </div>
        </form>
        
        <!-- 步骤3：完成注册 -->
        <div v-else class="register-success">
          <div class="success-icon">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="64" height="64">
              <circle cx="12" cy="12" r="10" fill="#4caf50" />
              <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" fill="white" />
            </svg>
          </div>
          <h2>注册成功!</h2>
          <p>您的账号已创建，即将跳转到登录页面...</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.register-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-color: var(--background-color);
}

.register-container {
  max-width: 900px;
  width: 100%;
  display: flex;
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.register-side {
  width: 35%;
  background-color: var(--primary-color);
  color: white;
  padding: 3rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.register-side-content h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.register-side-content p {
  margin-bottom: 2rem;
  opacity: 0.9;
}

.register-progress {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.progress-step {
  display: flex;
  align-items: center;
  gap: 1rem;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.progress-step.active {
  opacity: 1;
}

.step-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: background-color 0.3s;
}

.progress-step.active .step-number {
  background-color: white;
  color: var(--primary-color);
}

.progress-step.complete .step-number {
  background-color: white;
  color: var(--primary-color);
}

.progress-line {
  width: 2px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.2);
  margin-left: 16px;
  transition: background-color 0.3s;
}

.progress-line.active {
  background-color: white;
}

.register-content {
  flex: 1;
  padding: 3rem;
}

.register-header {
  margin-bottom: 2rem;
  text-align: center;
}

.register-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.register-subtitle {
  color: var(--text-light);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-hint {
  font-size: 0.8rem;
  color: var(--text-light);
  margin-top: 0.25rem;
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.form-actions button {
  padding: 0.75rem 1.5rem;
}

.register-footer {
  margin-top: 2rem;
  text-align: center;
  color: var(--text-light);
  font-size: 0.9rem;
}

.login-link {
  color: var(--primary-color);
  font-weight: 600;
  text-decoration: none;
}

.login-link:hover {
  text-decoration: underline;
}

.register-success {
  text-align: center;
  padding: 2rem;
}

.success-icon {
  margin-bottom: 1.5rem;
}

.success-message {
  background-color: rgba(76, 175, 80, 0.1);
  color: #4caf50;
  padding: 0.75rem;
  border-radius: 4px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.error-message {
  background-color: rgba(217, 83, 79, 0.1);
  color: var(--error-color);
  padding: 0.75rem;
  border-radius: 4px;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .register-container {
    flex-direction: column;
  }
  
  .register-side {
    width: 100%;
    padding: 2rem;
  }
  
  .register-progress {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
  }
  
  .progress-line {
    width: 100%;
    height: 2px;
    margin: 0;
  }
  
  .register-content {
    padding: 2rem;
  }
}

@media (max-width: 480px) {
  .step-label {
    display: none;
  }
}
</style> 